<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VM Info</title>
    <link rel="stylesheet" href="resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="resource/css/dataTables.bootstrap.min.css">
    <script type="text/javascript" src="resource/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="resource/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="resource/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="resource/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#VMinfo').DataTable({
                "ajax": "resource/data/host_history.txt",
                "columns": [
                    {"data": "owner"},
                    {"data": "date"},
                    {"data": "dbtype"},
                    {"data": "reason"},
                    {"data": "newhostname"},
                    {"data": "status"},
                    {"data": "errorcode"},
                    {"data": "percent"}
                ]
            });
            details = {
                "P1G1": "OS : Redhat6.3, CPU : 64, Memory : 80G, Volume Size: 250G",
                "P1G2": "OS : Redhat6.2, CPU : 64, Memory : 80G, Volume Size: 250G",
                "CouchbaseVM": "OS : Redhat6.1, CPU : 64, Memory : 80G, Volume Size: 250G",
                "ArbiterVM": "OS : Redhat6.0, CPU : 64, Memory : 80G, Volume Size: 250G",
            }
            $("#HardwareType").bind("change", function () {
                $("#HardwareDetails").text(details[$(this).val()]);
            });
            $('#HardwareType').val("P1G2").change();
            $.get("resource/data/password.txt", function(data) {
                has_token = JSON.parse(data);
                $("#user").val(has_token["user"]).attr("readonly", "readonly");
                console.log(has_token['CorpPassword']);
                console.log(has_token['RSAPassword']);
                if (has_token['CorpPassword'] == 'true'){
                    $("#passworddiv").hide()
                }
                if (has_token['RSAPassword'] == 'true'){
                    $("#rsadiv").hide()
                }
            });
        })

    </script>
</head>
<body>
<div id="VMinfodiv" style="margin: 60px">
    <div class="container">
        <h3 align="center">Created VM Info</h3>

        <button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">
            Create New VM
        </button>
        <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Please input the info</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">You need to be member of DL X to apply a P1GX machine, go to
                            {link} to join that group
                        </div>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="DBtype" class="col-sm-3 control-label">DB Type</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="DBtype">
                                        <option value="mongodb" selected="selected">mongodb</option>
                                        <option value="cassandra">cassandra</option>
                                        <option value="couchbase">couchbase</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="DataCenter" class="col-sm-3 control-label">Data Center</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="DataCenter">
                                        <option value="SLC" selected="selected">SLC</option>
                                        <option value="PHX">PHX</option>
                                        <option value="LVS">LVS</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="HardwareType" class="col-sm-3 control-label">Hardware Type</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="HardwareType">
                                        <option value="P1G1">P1G1</option>
                                        <option value="P1G2">P1G2</option>
                                        <option value="CouchbaseVM">CouchbaseVM</option>
                                        <option value="ArbiterVM">ArbiterVM</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="HardwareDetails" class="col-sm-3 control-label">Hardware Details</label>
                                <div class="col-sm-9">
                                    <p id="HardwareDetails" class="text-info" style="margin-top: 8px; font-weight: 600"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="reason" class="col-sm-3 control-label">Reason</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="reason">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="user" class="col-sm-3 control-label">User</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="user">
                                </div>
                            </div>
                            <div class="form-group" id="passworddiv">
                                <label for="password" class="col-sm-3 control-label">Password</label>
                                <div class="col-sm-6">
                                    <input type="password" class="form-control" id="password"
                                           placeholder="CORP Password">
                                </div>
                            </div>
                            <div class="form-group" id="rsadiv">
                                <label for="RSAToken" class="col-sm-3 control-label">RSA Token</label>

                                <div class="col-sm-6">
                                    <input type="password" class="form-control" id="RSAToken">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="dataTables_wrapper form-inline" style="margin-top: 60px">
            <table class="table table-striped table-bordered" id="VMinfo" cellspacing="0">
                <thead>
                <tr>
                    <td>owner</td>
                    <td>date</td>
                    <td>dbType</td>
                    <td>reason</td>
                    <td>new host name</td>
                    <td>status</td>
                    <td>error code</td>
                    <td>finished percent</td>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>